<!DOCTYPE html>
<html lang="en" xmlns:th="http://thyneleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #tab{
        text-align: center;
        list-style: none;
    }
    #tab li {
        display: inline-block;
        list-style: none;
        cursor: pointer;
        padding: 0.8ex;
        margin-top: 1.5ex;
        background: #e7e7de no-repeat;
        font: bold 27px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #998e57;
        border-right: 1px solid #e7e3b2;
        border-bottom: 1px solid #e7e3b2;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
    }

    .hide {
        display: none;
    }

</style>
<script src="../js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //click事件里面会有for循环，为每个设置点击事件
        $("#tab li").click(function () {
            $("#container div").eq($(this).index()).removeClass("hide").siblings().addClass("hide");
        });
    });
</script>
<body>
<div th:replace="/common/header"></div>
<div id="Content">
<ul id="tab">
    <li id="tab1" style="width: 300px">New Order</li>
    <li id="tab2" style="width: 0"></li>
    <li id="tab3" style="width: 300px">Shipping Order</li>
</ul>

<div id="container">
    <div id="content1">
        <div id="Catalog"><form action="/order/ConfirmOrderForm" method="post">
            <style type="text/css">

                table {
                    width: 700px;
                    padding: 0;
                    margin: 0;
                }

                caption {
                    padding: 0 0 5px 0;
                    width: 700px;
                    font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
                    text-align: right;
                }

                th {
                    font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
                    color: #f5ba11;
                    border-right: 1px solid #bfa986;
                    border-bottom: 1px solid #bfa986;
                    border-top: 1px solid #bfa986;
                    letter-spacing: 2px;
                    text-transform: uppercase;
                    text-align: left;
                    padding: 6px 6px 6px 12px;
                    background: #eee0c5 no-repeat;
                }
                td {
                    border-right: 1px solid #bfa986;
                    border-bottom: 1px solid #bfa986;
                    background: #fff;
                    font-size:16px;
                    padding: 6px 6px 6px 12px;
                    color: #4f6b72;
                }

            </style>
            <table>
                <tr>
                    <th colspan=2>Payment Details</th>
                </tr>
                <tr>
                    <td>Card Type:</td>
                    <td><select name="cardType">
                        <option value="Visa" selected="selected">Visa</option>
                        <option value="MasterCard">MasterCard</option>
                        <option value="American Express">American Express</option>
                    </select>
                </tr>
                <tr>
                    <td>Card Number:</td>
                    <td><input type="text" name="creditCard" th:value=${order.creditCard}> </td>
                </tr>
                <tr>
                    <td>Expiry Date (MM/YYYY):</td>
                    <td><input type="text"  name="expiryDate" th:value=${order.expiryDate}></td>
                </tr>
                <tr>
                    <th colspan=2>Billing Address</th>
                </tr>

                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="billToFirstName" th:value=${order.billToFirstName}></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="billToLastName" th:value=${order.billToLastName}></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input type="text" size="40" name="billAddress1" th:value=${order.billAddress1}></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" size="40" name="billAddress2" th:value=${order.billAddress2}></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="billCity" th:value=${order.billCity}></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" size="4" name="billState" th:value=${order.billState}></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text" size="10" name="billZip" th:value=${order.billZip}></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text"  size="15" name="billCountry" th:value=${order.billCountry}></td>
                </tr>
            </table>
            <input type="submit"  name="newOrder" value="Continue" />
        </form></div>
    </div>
    <div id="content2" class="hide">
        <div id="Catalog">
            <form action="/order/ConfirmOrderForm?orderId=${orderId}" method="post">
                <table>
                    <tr>
                        <th colspan=2>Shipping Address</th>
                    </tr>

                    <tr>
                        <td>First name:</td>
                        <td><input type="text" name="shipToFirstName" th:value="${order.shipToFirstName}"/></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td><input type="text" name="shipToLastName" th:value="${order.shipToLastName}"/></td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td><input type="text" size="40" name="shipAddress1" th:value="${order.shipAddress1}"/></td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td><input type="text" size="40" name="shipAddress2" th:value="${order.shipAddress2}"/></td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td><input type="text" name="shipCity" th:value="${order.shipCity}"/></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td><input type="text" size="4" name="shipState" th:value="${order.shipState}"/></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td><input type="text" size="10" name="shipZip" th:value="${order.shipZip}"/></td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td><input type="text" size="15" name="shipCountry" th:value="${order.shipCountry}"/></td>
                    </tr>
                </table>
                <input type="submit" name="newOrder" value="Continue"/>
            </form>
        </div>
    </div>
</div>
</div>
<div th:replace="/common/footer"></div>
</body>
</html>